{% stylesheet %}
.block_collection_nav .block_collection_nav_content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block_collection_nav .block_collection_nav_content ul li {
  width: calc(50% - 15px);
  margin-top: 30px;
}

.block_collection_nav .block_collection_nav_content ul li:nth-child(1), .block_collection_nav .block_collection_nav_content ul li:nth-child(2) {
  margin-top: 0;
}

.block_collection_nav .block_collection_nav_item {
  display: flex;
  align-items: center;
}

.block_collection_nav .block_collection_nav_image {
  width: 47%;
  flex-shrink: 0;
}

.block_collection_nav .block_collection_nav_image img {
  object-fit: cover;
  width: 100%;
}

.block_collection_nav .block_collection_nav_item dl {
  padding: 20px 50px;
}

.block_collection_nav .block_collection_nav_item dt {
  margin-bottom: 20px;
}

.block_collection_nav .block_collection_nav_item dt a {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.block_collection_nav .block_collection_nav_item dd {
  margin-bottom: 10px;
}

.block_collection_nav .block_collection_nav_item dd a {
  position: relative;
}

.block_collection_nav .block_collection_product_more {
  margin-top: calc(var(--general_layout_spacing) * 0.5);
  text-align: center;
}

.block_collection_nav .block_collection_product_more a {
  margin: 0;
}

.block_collection_nav .block_collection_nav_item dd a:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-main);
  transition: .5s;
  opacity: 0;
}

.block_collection_nav .block_collection_nav_item dd a:hover:after {
  opacity: 1;
  width: 100%;
}

@media (max-width: 1200px) {
  .block_collection_nav .block_collection_nav_item dl {
    padding: 20px 0 20px 30px;
  }
}

@media (max-width: 1000px) {
  .block_collection_nav .block_collection_nav_item {
    flex-direction: column;
  }
  .block_collection_nav .block_collection_nav_image {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .block_collection_nav .block_collection_nav_content ul li {
    width: calc(50% - 7.5px);
    margin-top: 15px;
  }
  .block_collection_nav .block_collection_nav_item dl {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
  }
  .block_collection_nav .block_collection_nav_item dt a {
    font-size: 18px;
  }
  .block_collection_nav .block_collection_nav_item dt {
    margin-bottom: 8px;
  }
  .block_collection_nav .block_collection_nav_item dd {
    margin-bottom: 5px;
  }
  .block_collection_nav .block_collection_nav_item dd:last-child {
    margin-bottom: 0;
  }
  .block_collection_nav .block_collection_nav_item dd a {
    font-size: 13px;
  }
  .block_collection_nav .block_collection_product_more {
    margin-top: 30px;
  }
}

{% endstylesheet %}


<div class="block_collection_nav" id="block_collection_nav_{{ block.id }}"> 
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

        <div class="block_collection_nav_content">
            <ul>
                {% if section.blocks.size %}
                {% for block in section.blocks %}

                {% get_collection collections_id={block.collection.id} collection_image=1 %}
                {%- capture collection_handle -%}
                {% if collection.handle %}/collections/{{ collection.handle }}{% else %}javascript:;{% endif %}
                {%- endcapture -%}
                <li>
                    <div class="block_collection_nav_item" style="background-color: {{ block.collection_nav_bg }};">
                        <a class="block_collection_nav_image" href="{{collection_handle}}" >
															{% if block.collection.id != "" %}
																{%- if collection.image_alt == "" -%}
																	{% assign collection_alt = collection | image_alt:'collection'   %}
																{%- else -%}
																	{% assign collection_alt = collection.image_alt %}
																{%- endif -%}
																<img data-src="{{ collection.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ collection_alt }}">
															{% else %}
																<img src="{{ 'empty.png' | public_asset_abs_url }}">
															{% endif %}
                        </a>
                        {% if block.collection_nav.id or block.collection.id %}
                        <dl>
                            <dt><a href="{{collection_handle}}">{{collection.title}}</a></dt>
                            {% for link in block.link_list %}
                            <dd><a href="{{link | setUrlDataFrom:data_from}}">{{link.title}}</a></dd>
                            {% endfor %}
                        </dl>
                        {% else %}
                        <dl>
                            <dt><a href="javascript:(void);">Collection level</a></dt>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                        </dl>
                        {% endif %}
                    </div>
                    
                </li>

                
                {% endfor %}

                {% else %}
                {% for i in (1..4) %}
                 <li>
                    <div class="block_collection_nav_item">
                        <a class="block_collection_nav_image" href="javascript:(void);" data-tips="Please select an album" >
                            <img src="{{ 'empty.png' | public_asset_abs_url }}">
                        </a>
                        <dl>
                            <dt><a href="javascript:(void);">Collection level</a></dt>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                        </dl>
                    </div>
                    
                </li>
                {% endfor %}
                {% endif %}
            </ul>
        </div>

        {% if section.settings.more_text != ""%}
            <div class="block_collection_product_more"><a class="secondary_btn" href="/collections/all">{{ section.settings.more_text }}</a></div>
        {% endif %}

    </div>
</div>

{% schema %}
{
	"tag": "section",
	"class": "block_collection",
	"is_global": false,
	"name": {
		"zh_CN": "专辑导航列表",
		"en_US": "Collection nav list"
	},
	"icon": "icon-zhuanjidaohangliebiao11",
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "专辑编辑",
				"en_US": "Collection editing"
			},
			"type": "collection-item",
			"settings": [
				{
					"type": "card_collection",
					"label": {
						"zh_CN": "选择专辑",
						"en_US": "Select collection"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "collection"
				},
				{
					"type": "card_link_list",
					"label": {
						"zh_CN": "二级链接",
						"en_US": "Secondary link"
					},
					"buttonLabel": {
						"zh_CN": "添加链接组",
						"en_US": "Add links group"
					},
					"default": [
						{
							"type": "",
							"title": "",
							"url": ""
						}
					],
					"max": 10,
					"id": "link_list"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "专辑背景颜色",
						"en_US": "Collection background color"
					},
					"default": "#ffffff",
					"id": "collection_nav_bg"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Collections",
			"detail": "",
			"more_text": "View More"
		},
		"blocks": [
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"link_list": [],
				"block_type": "collection-item"
			},
			{
				"collection_pic": {
					"src": "",
					"alt": ""
				},
				"collection": {
					"id": "",
					"title": ""
				},
				"link_list": [],
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"link_list": [],
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"link_list": [],
				"block_type": "collection-item"
			}
		]
	}
}
{% endschema %}